<template>
  <div
    :class="[
      'intelligent--wrap',
      {
        large: large,
        video: model == 'video',
        expand: isExpanded,
        collapse: !isExpanded,
      },
    ]"
    v-show="visible"
  >
    <div class="intelligent--title" @click="toggle">
      <span class="intelligent--title--text">智能结构化信息</span>
      <span
        :class="[
          'intelligent--title--icon',
          { expand: isExpanded, collapse: !isExpanded },
        ]"
        ><a-icon type="up" :style="{ color: '#ffffff', fontSize: '18px' }"
      /></span>
    </div>
    <div class="intelligent--content">
      <div class="intelligent--item">
        <div class="intelligent--item--round"></div>
        <div class="intelligent--item--sub">所在位置:</div>
        <div class="intelligent--item--con">
          <a-select
            :class="['ownfeatureselect', { active: isCanEdit }]"
            v-model="local"
            :disabled="recordDisabled"
            :dropdown-style="{ zIndex: 1300 }"
          >
            <a-select-option
              :value="item"
              v-for="(item, index) in locations"
              :key="item + index"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="intelligent--item">
        <div class="intelligent--item--round"></div>
        <div class="intelligent--item--sub">测量信息:</div>
      </div>
      <div class="intelligent--measure--con">
        <div
          class="intelligent-measure--item"
          v-for="(item, index) in measurePoints"
          :key="item.id"
        >
          <span class="intelligent-measure--item--sub"
            >测距{{ index + 1 }}</span
          >
          <input
            class="intelligent-measure--item--val"
            type="text"
            :value="item.dis"
          />
          <span>cm</span>
        </div>
      </div>
      <div class="intelligent--item">
        <div class="intelligent--item--round"></div>
        <div class="intelligent--item--sub">诊断提示:</div>
        <div class="intelligent--item--con">
          <a-select
            :class="['ownfeatureselect', { active: isCanEdit }]"
            v-model="tip"
            :disabled="recordDisabled"
            :dropdown-style="{ zIndex: 1300 }"
            @change="tipChange"
          >
            <a-select-option
              :value="item"
              v-for="(item, index) in tips"
              :key="item + index"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="intelligent--item">
        <div class="intelligent--item--round"></div>
        <div class="intelligent--item--sub">疑似异常特征:</div>
      </div>
      <div class="intelligent--feature--con" v-show="showFeature">
        <div class="intelligent--feature--item">
          <span class="intelligent-feature---item--sub">位置:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="loc"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in loc_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item">
          <span class="intelligent-feature---item--sub">形态:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="jj_shape"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in jj_shape_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item" v-if="pos == '甲状腺'">
          <span class="intelligent-feature---item--sub">纵横比:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="aspect_ratio"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in aspect_ratio_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item">
          <span class="intelligent-feature---item--sub">边缘:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="edge"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in edge_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item" v-if="pos == '甲状腺'">
          <span class="intelligent-feature---item--sub">声晕:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="sonic_halo"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in sonic_halo_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item" v-if="pos == '甲状腺'">
          <span class="intelligent-feature---item--sub">内部结构:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="structure"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in structure_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item">
          <span class="intelligent-feature---item--sub">回声强度:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="jj_echo_intensity"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in jj_echo_intensity_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item">
          <span class="intelligent-feature---item--sub">回声分布:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="jj_echo_distribution"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in jj_echo_distribution_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item" v-if="pos == '甲状腺'">
          <span class="intelligent-feature---item--sub">局灶性回声:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="focal_hyperechoic"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in focal_hyperechoic_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item" v-if="pos != '颈动脉'">
          <span class="intelligent-feature---item--sub">后方回声:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="rear_echo"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in rear_echo_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
        <div class="intelligent--feature--item" v-if="pos == '甲状腺'">
          <span class="intelligent-feature---item--sub">内部血流:</span>
          <span class="intelligent-feature---item--val">
            <a-select
              :class="['ownfeatureselect', { active: isCanEdit }]"
              v-model="blood_flow"
              :disabled="recordDisabled"
              :dropdown-style="{ zIndex: 1300 }"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in blood_flow_select"
                :key="item + index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Intelligent",
  props: ["pos", "recordDisabled", "visible", "large", "model"],
  computed: {
    //根据部位计算出位置
    locations() {
      if (this.pos == "甲状腺") {
        return ["左叶", "右叶", "峡部"];
      } else if (this.pos == "颈动脉") {
        return [
          "左侧颈总动脉",
          "左侧颈动脉窦部",
          "左侧颈内及颈外动脉",
          "右侧颈总动脉",
          "右侧颈动脉窦部",
          "右侧颈内及颈外动脉",
        ];
      } else if (this.pos == "消化系" || this.pos == "腹部") {
        return ["肝脏", "胆囊", "胰腺", "脾脏"];
      } else if (this.pos == "泌尿系" || this.pos == "泌尿") {
        return ["左肾", "右肾"];
      } else {
        return [];
      }
    },
    defaultLocation() {
      if (this.pos == "甲状腺") {
        return "左叶";
      } else if (this.pos == "颈动脉") {
        return "左侧颈总动脉";
      } else if (this.pos == "消化系" || this.pos == "腹部") {
        return "肝脏";
      } else if (this.pos == "泌尿系" || this.pos == "泌尿") {
        return "左肾";
      } else {
        return [];
      }
    },
    loc_select() {
      if (this.pos == "甲状腺") {
        return [
          "左叶上极",
          "左叶中极",
          "左叶下极",
          "右叶上极",
          "右叶中极",
          "右叶下极",
          "峡部",
        ];
      } else if (this.pos == "颈动脉") {
        return ["后", "前", "内", "外侧壁"];
      } else if (this.pos == "消化系" || this.pos == "腹部") {
        return [
          "尾叶",
          "左外叶",
          "左内叶",
          "右前叶",
          "右后叶",
          "体部",
          "颈部",
          "底部",
          "胰头",
          "胰体",
          "胰尾",
          "上部",
          "中部",
          "下部",
        ];
      } else if (this.pos == "泌尿系" || this.pos == "泌尿") {
        return ["上极", "中部", "下极"];
      } else {
        return [];
      }
    },
    edge_select() {
      if (this.pos == "甲状腺") {
        return ["光整", "不规则", "模糊", "甲状腺外侵犯"];
      } else if (this.pos == "颈动脉") {
        return ["完整", "不完整"];
      } else if (this.pos == "消化系" || this.pos == "腹部") {
        return ["清楚", "不清楚"];
      } else if (this.pos == "泌尿系" || this.pos == "泌尿") {
        return ["清楚", "不清楚"];
      } else {
        return [];
      }
    },
    jj_echo_intensity_select() {
      if (this.pos == "甲状腺") {
        return ["高回声", "等回声", "低回声", "无回声"];
      } else if (this.pos == "颈动脉") {
        return ["强回声", "高回声", "等回声", "低回声"];
      } else if (this.pos == "消化系" || this.pos == "腹部") {
        return ["高回声", "等回声", "低回声", "无回声", "混合回声"];
      } else if (this.pos == "泌尿系" || this.pos == "泌尿") {
        return ["高回声", "等回声", "低回声", "无回声", "混合回声"];
      } else {
        return [];
      }
    },
  },
  watch: {
    tip(val) {
      if (val == "正常") {
        this.showFeature = false;
      } else {
        this.showFeature = true;
      }
    },
    visible(val) {
      if (!val) {
        this.isExpanded = true;
        console.log("智能结构化信息关闭");
      }else{
        this.isExpanded = false;
      }
    },
  },

  data() {
    return {
      param_id: "", //当前图像id
      oriInfo: null, //原始图像信息
      isCanEdit: true,
      local: "", //位置
      tip: "正常", //提示
      tips: ["正常", "疑似局灶性异常", "疑似弥漫性异常"],
      showFeature: false, //是否显示病灶特征
      measurePoints: [],

      loc: "", //病灶位置
      jj_shape: "", //形态
      aspect_ratio: "", //纵横比
      edge: "", //边缘
      sonic_halo: "", //声晕
      structure: "", //内部结构
      jj_echo_intensity: "", //回声强度
      jj_echo_distribution: "", //回声分布
      focal_hyperechoic: "", //局灶性强回声
      rear_echo: "", //后方回声
      blood_flow: "", //血流

      jj_shape_select: ["规则", "不规则"], //形态选项
      jj_echo_distribution_select: ["均匀", "不均匀"], //回声分布选项
      rear_echo_select: ["增强", "衰减", "无改变", "混合改变"], //后方回声选项

      aspect_ratio_select: ["A/T≥1", "A/T＜1"], //纵横比选项
      sonic_halo_select: ["无声晕", "有声晕"], //声晕选项
      structure_select: ["实性", "囊实混合性", "囊性", "海绵状"], //内部结构选项
      blood_flow_select: ["无血供", "不丰富", "丰富血供"], //血流选项
      focal_hyperechoic_select: [
        "点状强回声",
        "边缘钙化",
        "粗大钙化",
        "彗星尾伪像",
        "无局灶性强回声",
      ], //局灶性强回声选项
      isExpanded: false, //展开或收起
      elementStyle: {
        overflow: "hidden", // 初始隐藏滚动条
      },
    };
  },
  methods: {
    //根据传入设置
    initIntelligentVal(params) {
      try {
        this.oriInfo = params;
        console.log("initIntelligentVal", params);
        this.reSetDate();
        for (let props in params) {
          if (params[props]) {
            this[props] = params[props];
          }
        }
      } catch (error) {
        console.log("initIntelligentVal", error);
      }
    },
    //是否有改动
    isChanges() {
      try {
        let key = false;
        const checkProps = [
          "loc",
          "tip",
          "local",
          "jj_shape",
          "aspect_ratio",
          "edge",
          "sonic_halo",
          "structure",
          "jj_echo_intensity",
          "jj_echo_distribution",
          "focal_hyperechoic",
          "rear_echo",
          "blood_flow",
        ];
        for (let props of checkProps) {
          if (this[props]) {
            if (this.oriInfo[props] != this[props]) {
              console.log("props", props);
              key = true;
              break;
            }
          }
        }
        if (
          this.measurePoints.length > 0 &&
          this.oriInfo.measurePoints &&
          this.measurePoints.length != this.oriInfo.measurePoints.length
        ) {
          key = true;
        }
        if (!this.oriInfo.measurePoints && this.measurePoints.length > 0) {
          key = true;
        }
        return key;
      } catch (error) {
        console.log("isChanges", error);
      }
    },
    //获取智能值
    getIntelligentVal() {
      const info = {
        param_id: this.param_id,
        local: this.local,
        tip: this.tip,
      };
      if (this.measurePoints.length > 0) {
        info.measurePoints = this.measurePoints;
      }
      if (this.pos == "甲状腺") {
        if (this.tip == `正常`) {
          return info;
        } else {
          return {
            ...info,
            loc: this.loc,
            jj_shape: this.jj_shape,
            aspect_ratio: this.aspect_ratio,
            edge: this.edge,
            sonic_halo: this.sonic_halo,
            structure: this.structure,
            jj_echo_intensity: this.jj_echo_intensity,
            jj_echo_distribution: this.jj_echo_distribution,
            focal_hyperechoic: this.focal_hyperechoic,
            rear_echo: this.rear_echo,
            blood_flow: this.blood_flow,
          };
        }
      } else if (this.pos == "颈动脉") {
        if (this.tip == `正常`) {
          return info;
        } else {
          return {
            ...info,
            loc: this.loc,
            jj_shape: this.jj_shape,
            edge: this.edge,
            jj_echo_intensity: this.jj_echo_intensity,
            jj_echo_distribution: this.jj_echo_distribution,
          };
        }
      } else if (this.pos == "消化系" || this.pos == "腹部") {
        if (this.tip == `正常`) {
          return info;
        } else {
          return {
            ...info,
            loc: this.loc,
            jj_shape: this.jj_shape,
            edge: this.edge,
            jj_echo_intensity: this.jj_echo_intensity,
            jj_echo_distribution: this.jj_echo_distribution,
            rear_echo: this.rear_echo,
          };
        }
      } else if (this.pos == "泌尿系" || this.pos == "泌尿") {
        if (this.tip == `正常`) {
          return info;
        } else {
          return {
            ...info,
            loc: this.loc,
            jj_shape: this.jj_shape,
            edge: this.edge,
            jj_echo_intensity: this.jj_echo_intensity,
            jj_echo_distribution: this.jj_echo_distribution,
            rear_echo: this.rear_echo,
          };
        }
      } else {
        if (this.tip == `正常`) {
          return info;
        } else {
          return {
            ...info,
            loc: this.loc,
            jj_shape: this.jj_shape,
            edge: this.edge,
            jj_echo_intensity: this.jj_echo_intensity,
            jj_echo_distribution: this.jj_echo_distribution,
            rear_echo: this.rear_echo,
          };
        }
      }
    },
    //诊断提示改变时设置默认值
    tipChange(val) {
      console.log(val);
      if (val == "正常") {
        this.reSetDate();
      } else {
        // if (this.pos == "甲状腺") {
        //   this.loc = "左叶上极";
        //   this.jj_shape = "规则";
        //   this.aspect_ratio = "A/T≥1";
        //   this.edge = "光整";
        //   this.sonic_halo = "无声晕";
        //   this.structure = "实性";
        //   this.jj_echo_intensity = "高回声";
        //   this.jj_echo_distribution = "均匀";
        //   this.focal_hyperechoic = "点状强回声";
        //   this.rear_echo = "增强";
        //   this.blood_flow = "无血供";
        // } else if (this.pos == "颈动脉") {
        //   this.loc = "后";
        //   this.jj_shape = "规则";
        //   this.edge = "完整";
        //   this.jj_echo_intensity = "强回声";
        //   this.jj_echo_distribution = "均匀";
        // } else if (this.pos == "消化系") {
        //   this.loc = "尾叶";
        //   this.jj_shape = "规则";
        //   this.edge = "清楚";
        //   this.jj_echo_intensity = "高回声";
        //   this.jj_echo_distribution = "均匀";
        //   this.rear_echo = "增强";
        // } else if (this.pos == "泌尿系") {
        //   this.loc = "上极";
        //   this.jj_shape = "规则";
        //   this.edge = "清楚";
        //   this.jj_echo_intensity = "高回声";
        //   this.jj_echo_distribution = "均匀";
        //   this.rear_echo = "增强";
        // }
      }
    },
    updateMeasurePoints(val) {
      try {
        if (this.measurePoints.length > 0) {
          const update = val[val.length - 1];
          if (update) {
            this.measurePoints.push(update);
          }
        } else {
          this.measurePoints = [...val];
        }
      } catch (error) {
        console.log("updateMeasurePoints error", error);
      }
    },
    reSetDate() {
      this.loc = "";
      this.jj_shape = "";
      this.aspect_ratio = "";
      this.edge = "";
      this.sonic_halo = "";
      this.structure = "";
      this.jj_echo_intensity = "";
      this.jj_echo_distribution = "";
      this.focal_hyperechoic = "";
      this.rear_echo = "";
      this.blood_flow = "";
      this.measurePoints = [];
    },
    //获取智能结构化结果 false没有病灶
    getIntelligentRes() {
      if (this.tip == "正常") {
        return false;
      } else {
        return true;
      }
    },
    toggle() {
      this.isExpanded = !this.isExpanded;
      if (this.isExpanded) {
        this.elementStyle = { overflow: "hidden" }; // 动画开始时隐藏滚动条
      } else {
        this.elementStyle = { overflow: "hidden" }; // 动画开始时隐藏滚动条
      }
    },
    handleTransitionEnd() {
      try {
        console.log("动画结束！");
        if (this.isExpanded) {
          this.elementStyle = { overflow: "auto" }; // 动画结束后显示滚动条
        }
      } catch (error) {
        console.log("handleTransitionEnd", error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/intelligent.less";
</style>
